<template>
  <div>
    <el-menu
        class="el-menu-vertical-demo"
        :default-active="$route.path"
        :collapse="isCollapse"
        router
        style="font-weight: bold;background:#F0F2F5;height: 100%"
    >
      <el-menu-item @click="Collapse">
        <i :class="collbtnclass" style="cursor:pointer"></i>
        <span v-if="type === 'ON'">导航收起</span>
      </el-menu-item>
      <el-menu-item index="/home">
        <i class="el-icon-caret-right"></i><span v-if="type === 'ON'">首页</span>
      </el-menu-item>
      <el-menu-item index="/office">
        <i class="el-icon-caret-right"></i><span v-if="type === 'ON'">环境数据</span>
      </el-menu-item>
      <el-menu-item index="/history">
        <i class="el-icon-caret-right"></i><span v-if="type === 'ON'">历史数据</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "Aside",
  data() {
    return {
      user: {},
      isCollapse: false,
      type: 'ON',
      collbtnclass: 'el-icon-s-fold'
    }
  },
  created() {
    let userStr = sessionStorage.getItem("user") || "{}"
    this.user = JSON.parse(userStr)
  },
  methods: {
    Collapse() {
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {
        this.type = 'OFF'
        this.collbtnclass = 'el-icon-s-unfold'
      } else {
        this.type = 'ON'
        this.collbtnclass = 'el-icon-s-fold'
      }
    }

  }
}

</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
  min-height: calc(100vh - 64px);
}

.el-menu-vertical-demo {
  min-height: calc(100vh - 64px);
}
</style>
